<!-- 菜单子选项 -->

<template>
    <div class="menu">
        <header>
            <p>精选手册</p>
            <p>查看更多 ></p>
        </header>
        <section>
            <div>Java 手册</div>
            <div>Java 手册</div>
        </section>
    </div>
</template>

<script>
    export default {
        // eslint-disable-next-line vue/multi-word-component-names
        name: "Menu",
    }
</script>

<style>
    .menu {
        display: flex;
        flex-direction: column;
    }
    header {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    section {
        flex: 10;
        display: flex;
        flex-direction: column;
        border-bottom: 1px solid lightgray;
        padding-bottom: 0.5px;
    }
    section div {
        height: 3rem;
    }
</style>
